<template>
	<view class="uni-menu-item" :class="{'is-active':active,'is-disabled':disabled}" :style="{paddingLeft:paddingLeft,'color':disabled?'#999':(active?activeTextColor:textColor),'background-color':active?activeBackgroundColor:''}"
	 @click="onClickItem">
		<slot></slot>
	</view>
</template>

<script>
	import rootParent from '../uni-nav-menu/mixins/rootParent.js'
	export default {
		name: 'uniMenuItem',
		mixins: [rootParent],
		props: {
			// 唯一标识
			index: {
				type: [String,Object],
				default(){
					return ''
				}
			},
			// TODO 是否禁用
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				active: false,
				activeTextColor: '#00f0ff',
				textColor: '#7f8ea3',
				activeBackgroundColor: 'transparent'
			};
		},
		computed: {
			paddingLeft() {
				return 20 + 20 * this.rootMenu.SubMenu.length + 'px'
			}
		},
		created() {
			this.init()
		},
		destroyed() {
			if (this.$menuParent) {
				const menuIndex = this.$menuParent.itemChildrens.findIndex(item => item === this)
				this.$menuParent.itemChildrens.splice(menuIndex, 1)
			}
		},
		methods: {
			init() {
				this.rootMenu = {
					NavMenu: [],
					SubMenu: []
				}
				this.indexPath = []
				// 获取直系的所有父元素实例
				this.getParentAll('SubMenu', this)
				// 获取最外层父元素实例
				this.$menuParent = this.getParent('uniNavMenu', this)
				this.$subMenu = this.rootMenu.SubMenu

				this.activeTextColor = this.$menuParent.activeTextColor
				this.textColor = this.$menuParent.textColor
				this.activeBackgroundColor = this.$menuParent.activeBackgroundColor

				// 将当前插入到menu数组中
				if (this.$menuParent) {
					this.$menuParent.itemChildrens.push(this)
					this.$menuParent.isActive(this)
				}
			},

			// 点击 menuItem
			onClickItem(e) {
				if (this.disabled) return
				// 关闭其他已经选中的 itemMenu
				this.$menuParent.closeOtherActive(this)
				this.active = true
				this.indexPath.unshift(this.index)
				this.indexPath.reverse()
				if(e !== 'init'){
					// this.$menuParent.activeIndex=this.index
					this.$menuParent.select(this.index, this.indexPath)
				}
			}

		}
	}
</script>

<style lang="scss">
	.uni-menu-item {
		display: flex;
		align-items: center;
		padding: 0 16px;
		height: 44px;
		line-height: 44px;
		color: #7f8ea3;
		transition: all 0.3s ease;
		cursor: pointer;
		margin: 4px 8px;
		border-radius: 6px;
		border-left: 3px solid transparent;
		position: relative;
		overflow: hidden;
		font-size: 13px;
		letter-spacing: 0.3px;
	}

	.uni-menu-item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 100%;
		background: linear-gradient(90deg, rgba(0, 240, 255, 0.1), transparent);
		transition: width 0.3s ease;
		z-index: 0;
	}

	.uni-menu-item:hover {
		outline: none;
		background: rgba(0, 240, 255, 0.1) !important;
		color: #00f0ff !important;
		border-left-color: #00f0ff;
		transform: translateX(4px);
	}

	.uni-menu-item:hover::before {
		width: 100%;
	}

	.is-active {
		background: linear-gradient(90deg,
			rgba(0, 240, 255, 0.2) 0%,
			rgba(0, 240, 255, 0.05) 100%
		) !important;
		color: #00f0ff !important;
		border-left-color: #00f0ff !important;
		font-weight: 600;
		box-shadow: 0 2px 10px rgba(0, 240, 255, 0.2);
	}

	.is-disabled {
		color: #4a5568;
		opacity: 0.5;
	}

	.uni-menu-item.is-disabled:hover {
		background: transparent !important;
		color: #4a5568 !important;
		border-left-color: transparent;
		transform: none;
		cursor: not-allowed;
	}

	/* 菜单项中的图标 */
	.uni-menu-item .uni-icons {
		margin-right: 8px;
		transition: all 0.3s ease;
		filter: drop-shadow(0 0 0 transparent);
	}

	.uni-menu-item:hover .uni-icons,
	.uni-menu-item.is-active .uni-icons {
		filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
	}

	/* 菜单项文本 */
	.uni-menu-item text {
		position: relative;
		z-index: 1;
	}
</style>
